<!-- 物流管理 -->
<template>
    <el-header style="text-align: left; font-size: 12px">
      <div class="toolbar">
          <div class="search">
              <el-input type="text" placeholder="请输入内容" v-model="search" clearable @clear="getwuliu" />
              <el-button @click="getsearch"><el-icon><search /></el-icon></el-button>
          </div>
        <el-button type="primary" @click="dialogTableVisible=true"> 新增路线</el-button>
      </div>
    </el-header>
    <div class="container">
        <el-table :data="tickList" fit="true" height=590 style="padding: 10px 30px;">
        <el-table-column prop="name" label="路线名称" width="100">
          <template #default=scope>
            <el-input type="text" v-model="scope.row.name" v-show="scope.row.edit" />
            <span v-show="!scope.row.edit">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="lutu" label="途径" width="200">
          <template #default=scope>
            <el-input type="text" v-model="scope.row.lutu" v-show="scope.row.edit" />
            <span v-show="!scope.row.edit">{{scope.row.lutu}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" width="150">
          <template #default=scope>
            <el-input type="text" v-model="scope.row.address" v-show="scope.row.edit" />
            <span v-show="!scope.row.edit">{{scope.row.address}}</span>
          </template>
        </el-table-column>
        <el-table-column  prop="phone" label="电话"  :show-overflow-tooltip="true" >
          <template #default=scope>
            <el-input type="text" v-model="scope.row.phone" v-show="scope.row.edit" />
            <span v-show="!scope.row.edit">{{scope.row.phone}}</span>
          </template>
        </el-table-column>
        <el-table-column  label="功能"  fixed="right" width="300">
          <template #default="scope">
            <el-button type="warning" size="mini" @click="topmove(scope.row,scope.$index)">置顶</el-button>
            <el-button type="warning" size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="save(scope.row)">保存</el-button>
            <el-button type="primary" size="mini" @click="del(scope.row)">删除</el-button>
          </template>
      </el-table-column>
        </el-table>
    <div class="block">
    <!-- 分页 -->
    <el-pagination
      
      style="background-color:aliceblue;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pagenum"
      :page-sizes="[5, 8, 9]"
      :page-size='query.pagesize'
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.total">
    </el-pagination>
    </div>
    
    </div>
    
    <!-- 增加数据 -->
    <el-dialog title="新增用户" v-model="dialogTableVisible">
      <div class="con">
        <div class="users">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="路线名称" prop="name">
        <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="途径" prop="lutu">
        <el-input type="text" v-model="ruleForm.lutu" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
        </div>
    </div>
    </el-dialog>
    </template>
    
    <script>

    
      export default {
        data() {
          var checkMail = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('邮箱不能为空'));
            }
            callback()
          };
          var checkuser = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('用户名不能为空'));
            } else {
              callback();
            }
          };
          var checkPhone = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('电话不能为空'));
            }else {
                callback();
            }
          };
          var checkAddress =(rule, value, callback)=>{
            if (value === '') {
              callback(new Error('地址不能为空'));
            }else {
              callback();
            }       
          }
          return {
            search:"",
            tableData: [],
            dialogTableVisible:false,
            ruleForm: {
              name: '',
              lutu: '',
              address: '',
              phone:'',
            },
            query:{
              pagenum:1, //当前页码
              pagesize:5, //每页显示条数
              total:0
            },
    
            tickList:[],   //当前页数据
    
            rules: {
              user: [
                { validator: checkuser, trigger: 'blur' }
              ],
              phone: [
                { validator: checkPhone, trigger: 'blur' },
              ],
              mail: [
                { validator: checkMail, trigger: 'blur' },
              ],
              address:[
                { validator: checkAddress, trigger:'blur'}
              ]
            }
          }
        },
        methods: {
            //置顶
            topmove(row,index){
                if(this.tickList){
                    this.tickList.splice(index,1)
                    this.tickList.unshift(row)
                }
            },

          //检查token
          checktoken(){
            let token = localStorage.getItem('token')
            this.$axios({
              method:'post',
              url:'token',
              data:token,
              headers:{'Authorization': localStorage.getItem('token')}
            }).then(res=>{
              let {code,msg} = res.data
              if(code==401){
                this.$router.push({name:'login'})
                this.$message.error(msg)
              }
    
            })
          },

          //搜索
          async getsearch(){
            let {data} = await this.$axios.post('search',{key:this.search})
            console.log(data);
            this.tableData = data.msg
            this.query.total = data.msg.length
            this.getPageInfo()  //获取当前页数据
          },

          //当前页数据
          getPageInfo(){
            //清空tickList中的数据
            this.tickList=[];
            // 获取当前页的数据
            for(let i=(this.query.pagenum-1)*this.query.pagesize;i<this.query.total;i++){
              //把遍历的数据添加到tickList里面
              if(this.tableData){
                let data = this.tableData[i]
                this.tickList.push(data);
              }
              //判断是否达到一页的要求
              if(this.tickList.length===this.query.pagesize)break;
            }},
          //当页码或页面大小改变时触发回调
          handleSizeChange(newSize) {
            this.query.pagesize = newSize
            this.getPageInfo()
    
          },
          handleCurrentChange(newPage) {
            this.query.pagenum=newPage
            this.getPageInfo()
    
          },
            //编辑用户数据
            edit(row){
              row.edit = true
    
            },
            //保存
            async save(row){
    
              let {data} = this.$axios.post('updatawuliu',row)
                console.log(data);
              row.edit = false
            },
    
          //获取列表
            async getwuliu(){
                let {data} = await this.$axios.get('getwuliu')

                if(data.code == 200){
                    this.tableData = data.msg
                    this.query.total = data.msg.length
                    this.getPageInfo()  //获取当前页数据
                }
    
            },
            //删除
            async del({id}){
              let {data} = await this.$axios.post('deletewuliu',{id})
              console.log(data);
              if(data.code==200){
                this.getwuliu()
              }
            },
    //新增数据
            submitForm(formName) {  
            this.$refs[formName].validate(async (valid) => { 
              if (valid) {
                let {data} = await this.$axios.post('addwuliu',this.ruleForm)
                if(data.code==200){
                  this.getwuliu()
                  this.dialogTableVisible =false
    
                }
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
    
        },
        mounted(){
            this.getwuliu()
            this.checktoken()
        }
      };
    </script>
    <style scoped>
    .container{
        margin: 0 0;
        padding: 0 0;
    }
    .toolbar{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      right: 20px;
    }
    .search{
      display: inline-flex;
      align-items: center;
      margin-right: 20px;
    }
    </style>